<template>
	<view class="info">
		<view v-for="(item, index) in info" :key="index" @click="jump(item)">
			<button v-if="item.tit == '更换头像'" class="bt-tx" @click.stop='chooseavatar'>获取头像</button>
			<image v-if="item.tit == '更换头像'"
				class="avatar"
				:src="userinfo.headimgurl || '/static/logo.png'">
			</image>

			<view v-else class="name">{{item.tit}}</view>
			<view class="text">
				<view>{{item.text}}</view>
				<up-icon v-if="item.tit != '手机号'" name="arrow-right" color="#000000" size="15"></up-icon>
			</view>
		</view>
	</view>

	<view class="btn" @click="signOut">退出登录</view>
</template>

<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import { computed, getCurrentInstance, reactive } from 'vue'
	import { useCounterStore } from '../../stores/user';
	import api from '../../api/api';
	import { storeToRefs } from 'pinia'
	const { $https: https } = getCurrentInstance().proxy
	const use = useCounterStore()
	const { userinfo } = storeToRefs(use)

	const info = reactive([{
			tit: "更换头像"
		},
		{
			tit: "昵称",
			text: userinfo.value.nickname,
			address: './name-change'
		},
		{
			tit: "手机号",
			text: userinfo.value.phone,
			address: ''
		},
		{
			tit: "支付密码",
			text: userinfo.value.pay_pass ? "******" : '未设置',
			address: './setPay'
		},
		{
			tit: "银行卡",
			address: '/pages/bankCard/bankCard'
		},
	])

	function jump(item) {
		if (item.tit == '实名认证' && userinfo.value.real_name) return uni.$showMsg('认证通过')
		api.navigateTo(item.address)
	}

	/* 获取头像 */
	function chooseavatar(e) {
		uni.chooseImage({
			count: 1,
			sizeType: ['original'],
			sourceType: ['album'],
			success: function(res) {
				console.log(res.tempFilePaths[0], 'ss')
				uni.uploadFile({
					url: https + '/api/user/file_up',
					filePath: res.tempFilePaths[0],
					name: 'file',
					success: (res) => {
						if (JSON.parse(res.data).code !== 200) return uni.$showMsg('上传失败!')
						api.user.update_user_info({
							nickname: userinfo.value.nickname,
							headimgurl: JSON.parse(res.data).data.src
						}).then(res => {
							uni.$showMsg("修改成功!")
							setTimeout(() => {
								api.switchTab('/pages/user/user')
							}, 1000)
						})
					}
				});
			}
		});
	}

	function signOut() {
		uni.$showMsg('正在退出', 'loading')
		userinfo.value = {}
		uni.clearStorage();

		setTimeout(() => {
			uni.reLaunch({
				url: '/pagesHome/login/login'
			})
		}, 1000)
	}
	onShow(() => {
		if (userinfo.value.user_id) use.setInfo()
	})


	const user_login_id = computed(() => {
		return api.getStorage('user_login_id')
	})
</script>

<style lang="scss" scoped>
	.info {
		margin-top: 20rpx;
		margin-left: 32rpx;
		width: 688rpx;
		opacity: 1;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0 0 10rpx #d3d3d3;
		padding: 0 40rpx;

		>view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #D6D6D6;
			padding: 40rpx 0;

			.avatar {
				border-radius: 50%;
				width: 80rpx;
				height: 80rpx;
				opacity: 1;
				border: 2rpx solid rgba(255, 255, 255, 1);
			}

			.icon-box {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.name {
				width: 70%;
				font-weight: 600;
				color: #333333;
			}

			.text {
				display: flex;
				align-items: center;

				>view:nth-child(1) {
					text-align: right;
					width: 220rpx;
					color: #BABABA;
					margin-right: 10rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		>view:last-child {
			border: none;
		}

		.bt-tx {
			width: 100%;
			position: absolute;
			top: 40rpx;
			left: 0;
			opacity: 0;
		}
	}

	.btn {
		width: 600rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background-image: linear-gradient(190deg, #efc726 0%, #F6941D 100%);
		border-radius: 60rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		position: fixed;
		bottom: 200rpx;
		left: 74rpx;
	}
</style>